<!-- eslint-disable max-len -->
<template>
  <div class="home">
    <img alt="Vue logo" class="imgs"
      src="https://cdn7.axureshop.com/demo/2093544/images/%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2/u2047.png">

    <el-card class="withic">
      <p class="fons">管理员后台登入</p>
      <div class="line"></div>
      <el-form ref="form" :model="form" label-width="80px">
        <el-input prefix-icon="iconfont el-icon-user" v-model="name" placeholder="请输入账号"></el-input>
        <el-input prefix-icon="iconfont el-icon-lock" v-model="info" placeholder="请输入密码"></el-input>
        <div>
          <el-input v-model="urL" placeholder="请输入验证码" class="iptwit"></el-input>
          <img class="imger"
            src="https://cdn7.axureshop.com/demo/2093544/images/%E7%99%BB%E5%BD%95%E9%A1%B5%E9%9D%A2/u2042.png" alt="">
        </div>
        <template>
          <el-radio v-model="radio" label="2">记住密码</el-radio>
        </template>

        <el-row>
          <el-button @click="nowsave">登入</el-button>
        </el-row>
        <p class="pclons">热心市民小郭</p>
        <p class="pclons">版权所有 @ mituxiaoguo</p>
      </el-form>
    </el-card>
  </div>
</template>

<script>
// eslint-disable-next-line import/no-unresolved
import { gitlistform } from '@/api/db';

export default {
  data() {
    return {
      form: {},
      name: '',
      info: '',
      radio: '',
      urL: '',
    };
  },
  created() {
    this.getList();
  },
  methods: {
    async getList() {
      const { data } = await gitlistform();
      this.names = data[0].name;
      this.infos = data[0].info;
      this.urLs = data[0].URL;
      this.token = data[0].token;
    },
    nowsave() {
      if (this.names === this.name && this.infos === this.info && this.urLs === this.urL) {
        localStorage.setItem('token', this.token);
        this.$message({
          message: '登入成功',
          type: 'success'
        });
        this.$router.push('/about');
      } else {
        this.$message.error('错了哦，账号或密码错误');
      }
    }
  }
};
</script>
<style scoped>
::v-deep .el-input__icon {
  height: 100%;
  width: 25px;
  text-align: center;
  transition: all .3s;
  line-height: 40px;
  margin-top: 15px;
  margin-left: 28px;
}

::v-deep .el-row {
  box-sizing: border-box;
  margin-bottom: 22px;
}

::v-deep .pclons {
  text-align: center;
  color: #888;
  margin: 0;
  font-size: 13px;
}

::v-deep .el-button {
  color: #000000;
  border-radius: 28px;
  width: 346px;
  margin-left: 27px;
  border: 1px solid #666;
  margin-top: 43px;
}

::v-deep .el-radio {
  margin-top: 35px;
  margin-left: 28px;
}

::v-deep .imger {
  margin: -8px 22px;
}

::v-deep .iptwit {
  width: 30%;
}

::v-deep .line {
  width: 86%;
  border: 1px solid #efefef;
  margin: 5px auto;
}

::v-deep .el-input__inner {
  margin-top: 25px;
  margin-left: 30px;
  width: 86%;
  border: 1px solid #5a646e;
  border-radius: 8px;
}

::v-deep .el-card {
  border: 1px solid #30313361;
  margin: 0;
  padding: 0;
}

.fons {
  font-size: 32px;
  margin: 0;
  margin-bottom: 10px;
  padding: 0;
  text-align: center;
}

.home {
  display: flex;
  justify-content: space-around;
  margin-top: 100px;
}

::v-deep .imgs {
  margin-top: 140px;
  padding-bottom: 60px;
}

::v-deep .withic {
  width: 436px;
  height: 504px;
  border-radius: 10px;
}
</style>
